
import React from 'react';
import * as ListPagesTurnButtonStyle from './ListPagesTurnButton.less'

export default class ListPagesTurnButton extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
    pageIndex: React.PropTypes.number,
    onPaging: React.PropTypes.func,
   
  };
 
  constructor(props) {
    super(props);
  }

  state = {
    //按钮自身翻页页码模底数
    count:1
  }

  handleClick = (key,Index) => {

  	let { onPaging, pageIndex } = this.props;
    /*点按...返回操作*/
    if(Index=='...')return;	
    onPaging&&onPaging(Index);
    if (key){
      let limitCount = Math.floor(Index/3);
    /**
     * 限制翻页页码边界条件
     * 当前页码模底数小于1时，另最小模底数等于1
     * 当前页码模底数*3大于等于最大页数时，另最大模底数等于
     */
        limitCount=limitCount<1?1:limitCount;
        limitCount=limitCount*3>=pageIndex?limitCount-1:limitCount;
     this.setState({
        count:limitCount
     })
    }
    
  }

  handlePrev = (count) => {
      count--
    if (count<1)return;
      this.setState({
        count:count
     })
     
 
  }
  handleBack = (count,pageIndex) => {
      count++ 
    if (count*3+2>pageIndex)return
      this.setState({
        count:count
     })
  }
  render() {
    /**
     * 根据总页码pageIndex,当前页码currentPageIndex计算当前显示页码列表
     */
  	let { pageIndex, currentPageIndex } = this.props;
    let { count } = this.state;
  	let items = () => {
      /* 当页码显示大于7时显示页码翻页箭头*/
          if (pageIndex>7)
          {
            /**
             * [Arr 默认显示页码按钮列表]
             * @type {Array}
             */
            let Arr=[1,count*3-1==2?2:'...',count*3,count*3+1,count*3+2,pageIndex-(count*3+2)>2?'...':pageIndex-1,pageIndex];
            /*去掉重复页码*/
            let newArr=[];
            for (let i=0;i<Arr.length;i++){
              if ((!newArr.includes(Arr[i])&&Arr[i]<=pageIndex)||typeof Arr[i] == 'string'){
                  newArr.push(Arr[i])
              }
            }
            /*边界条件下，补全去重丢失的页码*/
            if (count*3==pageIndex)newArr.splice(2,0,pageIndex-5,pageIndex-4,pageIndex-3,pageIndex-2);
            if (count*3+1==pageIndex)newArr.splice(2,0,pageIndex-4,pageIndex-3,pageIndex-2);
            if (count*3+2==pageIndex)newArr.splice(2,0,pageIndex-4,pageIndex-3);
            if ((count+1)*3==pageIndex)newArr.splice(2,0,pageIndex-4);
            /*创建按钮列表*/
            let pageList=newArr.map((item,index)=><span key={index} className={currentPageIndex==item?'checked':''} onClick={()=>this.handleClick(true,item)}>{item}</span>)
            return (<div><span key={'prev'} className='prevButton' onClick={()=>this.handlePrev(count)}>{"<"}</span>
                       {pageList}
                       <span key={'back'} className='backButton' onClick={()=>this.handleBack(count,pageIndex)}>{">"}</span></div>);
          } else if (pageIndex>1){
            /* 当页码显示小于7时，不显示页码翻页箭头*/
            let newArr=[];
            for (let i=1;i<=pageIndex;i++) {
              newArr.push(<span key={i} className={currentPageIndex==i?'checked':''} onClick={()=>this.handleClick(false,i)}>{i}</span>)
            }
            return (<div>{newArr}</div>)
          } else {
            return (<div></div>)
          }
        }
    return (
      <div className={ListPagesTurnButtonStyle.listPagesTurnButton}>
      	{items()}
      </div>
    );
  }
}
